<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-20 10:09:28
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page headerBg="transparent">
    <view class="list">
      <image class="top-bg" mode="aspectFill" src="../../static/img/common/top-bg.png"></image>
      <view class="user">
        <avatar shape="circle" :size="56" :src="user.headimg"></avatar>
        <view @click="linkTo('/pages/settings/personal')" class="userInfo">
          <view class="username">{{ user.username }}</view>
          <view class="user-inner">
            <view class="single-inner">
              <view class="num">{{ user.follow }}</view>
              <view class="txt">关注</view>
            </view>
            <view class="single-inner">
              <view class="num">{{ user.fans }}</view>
              <view class="txt">粉丝</view>
            </view>
          </view>
        </view>
        <image @click="linkTo('/pages/settings/setting')" class="setup" mode="aspectFill"
          src="../../static/img/icon/setup-icon.png"></image>
      </view>
      <view class="handler-list">
        <view @click="linkTo(v.url)" class="single" v-for="v in list" :key="v.id">
          <image class="type" mode="aspectFill" :src="v.icon"></image>
          <view class="txt">{{ v.title }}</view>
          <image class="arrow" mode="aspectFill" src="../../static/img/icon/arrow-right-h.png"></image>
        </view>
      </view>
    </view>
  </l-page>
</template>

<script>
import avatar from "@/components/avatar/avatar";
export default {
  name: "mine",
  components: { avatar },
  data() {
    return {
      user: {
        username: "玛卡巴卡",
        headimg: "",
        follow: 0,
        fans: 0
      },
      list: [{ id: 0, title: '创建行程', icon: '../../static/img/icon/mine-icon-1.png' },
      { id: 1, title: '历史行程', icon: '../../static/img/icon/mine-icon-2.png' },
      { id: 2, title: '常用信息', icon: '../../static/img/icon/mine-icon-3.png', url: '/pages/settings/commonInfo' }]
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    linkTo(url) {
      this.$util.linkTo(url);
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.list {
  background: linear-gradient(to bottom, transparent 50%, #F5F5F5 50%);

  .top-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 750upx;
    height: 622upx;
  }

  .user {
    position: relative;
    .flex(row, flex-start);
    padding: 36upx 40upx 50upx;

    .userInfo {
      padding-left: 20upx;
      width: calc(100% - 46upx - 112upx);
    }

    .user-inner {
      .flex(row, flex-start);
    }

    .single-inner {
      .flex(row, flex-start);

      &:not(:last-child) {
        margin-right: 60upx;
      }

      .num {
        font-size: 28upx;
        font-weight: bold;
        color: #333333;
        line-height: 36upx;
      }

      .txt {
        margin-left: 6upx;
        font-size: 24upx;
        color: #666666;
        line-height: 36upx;
      }
    }

    .username {
      margin-bottom: 18upx;
      font-size: 32upx;
      font-weight: bold;
      color: #333333;
      line-height: 36upx;
    }

    .setup {
      width: 46upx;
      height: 44upx;
    }
  }

  .handler-list {
    position: relative;
    padding: 0 20upx;

    .single {
      .flex(row, flex-start);
      padding: 0 20upx;
      width: 100%;
      height: 100upx;
      background: #FFFFFF;
      border-radius: 16upx;

      &:not(:last-child) {
        margin-bottom: 20upx;
      }

      .txt {
        padding: 0 20upx;
        width: calc(100% - 24upx - 54upx);
        font-size: 24upx;
        color: #333333;
        line-height: 36upx;
      }

      .type {
        width: 54upx;
        height: 54upx;
      }

      .arrow {
        width: 24upx;
        height: 24upx;
      }
    }
  }
}
</style>